<template>
  <div class="flex flex-column ">
    <div class="hm-select-area hm-padding align-center bg-white font-14">
      <span style="margin-left: 20px;">停车场</span>
      <el-select v-model="searchObj.parking_lot_id" placeholder="请选择" class="hm-select" >
        <el-option value="ALL" label="全部"></el-option>
        <el-option
          v-for="item in options"
          :key="item.parking_lot_id"
          :label="item.parking_lot_name"
          :value="item.parking_lot_id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">车位状态</span>
      <el-select v-model="searchObj.is_binding_place" placeholder="请选择" class="hm-select" clearable>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span>时间</span>
      <el-date-picker
        class="hm-date"
        v-model="dateRangeTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
        <el-button type="primary" @click="getUserList">搜索</el-button>
        <el-button type="primary" plain @click="insertCar" style="float:right;margin-left:70px;">添加车辆</el-button>
    </div>
    <div class="home-table-area bg-white flex-sub">
      <el-row>
        <el-col :span="12">
          <div class="flex">
            <el-input class="hta-input" placeholder="搜索姓名等关键字" v-model="searchObj.keywords" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" @click="getUserList">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <el-button class="marginright" style="float:right;color:#f56c6c;border:0px;" @click="onblack">黑名单</el-button>
        </el-col>
      </el-row>
      <el-table class="home-table" :data="tableData" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
        <el-table-column type="index" width="60" label="序号"/>
        <el-table-column prop="car_number" label="车牌号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="driver" label="车主" header-align="center" align="center"></el-table-column>
        <el-table-column prop="driver_phone" label="联系电话" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="parking_lot_name" label="停车场" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="车位状态" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.is_binding_place === 'YES'" ><span class="bdcolor">已绑定</span ></div>
            <div v-if="scope.row.is_binding_place === 'NO'"><span class="bdnocolor">未绑定</span></div>
            <!-- {{ scope.row.status === 'IN' ? '已绑定' : scope.row.status === 'OUT' ? '未绑定' : '未绑定' }} -->
          </template>
        </el-table-column>
        <el-table-column label="起始时间" header-align="center" align="center" width="170">
          <template slot-scope="scope">
            {{ dateFormat(scope.row.effective_time_begin)+"-"+dateFormat(scope.row.effective_time_end) }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type='text' @click="editInfo(scope.row)">编辑</el-button>
            <el-button type='text' @click="delInfo(scope.row.car_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
        class="hm-page"
        background
        :page-size="searchObj.page_num"
        layout="prev, pager, next"
        :total="total" @current-change="sizeChange">
      </el-pagination>
    </div>
    <!--添加车辆弹框-->
    <el-dialog
      class="font-col"
      :title="titles"
      :visible.sync="dialogVisibleInsertCar"
      width="45%"
      :before-close="handleClose">
      <el-form :model="addForm" ref="addForm" label-width="120px" >
        <el-row>
          <el-form-item label="车牌号种类">  
            <el-radio-group v-model="addForm.car_type" @change="platemodel">
              <el-radio label="BLUE">蓝牌</el-radio>
              <el-radio label="YELLOW">黄牌</el-radio>
              <el-radio label="GREEN">绿牌</el-radio>
              <el-radio label="OTHER">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="车牌号">
            <el-col :span="2" class="mright">
              <el-input maxlength="1" v-model="carnumber.firstnumber" @input="moveNext(carnumber.firstnumber,5)"></el-input>
            </el-col>  
            <el-col :span="2" class="marginright">
              <el-input maxlength="1" v-model="carnumber.secondnumber" @input="moveNext(carnumber.secondnumber,6)"></el-input>
            </el-col>
            <el-col :span="2" class="mright">
              <el-input maxlength="1" v-model="carnumber.thirdnumber" @input="moveNext(carnumber.thirdnumber,7)"></el-input>
            </el-col>  
            <el-col :span="2" class="mright">
              <el-input maxlength="1" v-model="carnumber.fourthnumber" @input="moveNext(carnumber.fourthnumber,8)"></el-input>
            </el-col>    
            <el-col :span="2" class="mright">
              <el-input maxlength="1" v-model="carnumber.fifthnumber" @input="moveNext(carnumber.fifthnumber,9)"></el-input>
            </el-col>  
            <el-col :span="2" class="mright">
              <el-input maxlength="1" v-model="carnumber.sixthnumber" @input="moveNext(carnumber.sixthnumber,10)"></el-input>
            </el-col>  
            <el-col :span="2" class="mright">
              <el-input maxlength="1" v-model="carnumber.seventhnumber" @input="moveNext(carnumber.seventhnumber,11)"></el-input>
            </el-col>
            <el-col :span="2" v-if="isGreen">
              <el-input maxlength="1" v-model="carnumber.eighthnumber" @input="moveNext(carnumber.eighthnumber,12)"></el-input>
            </el-col>     
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车主姓名">
              <el-input  v-model="addForm.driver" placeholder="请输入车主姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input  v-model="addForm.driver_phone" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="停车场">
            <el-select v-model="addForm.parking_lot_id" placeholder="请选择停车场" @change="parkingchange">
              <el-option
                v-for="item in options"
                :key="item.parking_lot_id"
                :label="item.parking_lot_name"
                :value="item.parking_lot_id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="绑定车位(选填)">
            <el-col :span="11">
              <el-select v-model="addForm.partition_id" placeholder="区" @change="carchange">
                <el-option
                  v-for="item in optionArea"
                  :key="item.partition_id"
                  :label="item.partition_name"
                  :value="item.partition_id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="11">
              <el-select v-model="addForm.parking_place_id" placeholder="位" >
                <el-option
                  v-for="item in optionParking"
                  :key="item.parking_place_id"
                  :label="item.parking_place_number"
                  :value="item.parking_place_id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="有效时间">
            <el-date-picker v-model="dateRangeTimes" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>  
      <div class="margintop marginbottom" style="text-align: center;">
        <el-button type="danger" v-if="titles==='编辑车辆'" plain @click="blackress" ><span style="margin:0 20px;">加入黑名单</span></el-button>
        <el-button type="primary" v-if="titles==='编辑车辆'" @click="editress" ><span style="margin:0 40px;">确定</span></el-button>
        <el-button type="primary" v-if="titles==='添加车辆'" @click="enterress" ><span style="margin:0 40px;">确定</span></el-button>
      </div>
    </el-dialog>
    <!--黑名单弹框-->
    <el-dialog
      class="font-col"
      title="黑名单"
      :visible.sync="dialogVisibleBlack"
      width="45%"
      :before-close="handleCloses">
      <el-table class="home-table" :data="tableBlack" :header-cell-style="{display:'none'}">
          <el-table-column prop="car_number" label="车牌号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="driver" label="车主" header-align="center" align="center"></el-table-column>
          <el-table-column prop="driver_phone" label="联系电话" header-align="center" align="center" width="200"></el-table-column>
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type='text' @click="relieveInfo(scope.row.car_id)">解除</el-button>
            </template>
          </el-table-column>
      </el-table>
    </el-dialog>  
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      dateRangeTime: [],
      dateRangeTimes: [],
      dialogVisibleInsertCar: false,
      dialogVisibleBlack: false,
      isGreen: false,
      searchObj: {
        parking_lot_id: 'ALL',
        effective_time_begin: '',
        is_binding_place:'',
        effective_time_end: '',
        keywords: '',
        page: 1,
        page_num: 10,
      },
      typeOptions: [
        {
          label: '绑定',
          value: 'YES'
        },
        {
          label: '未绑定',
          value: 'NO'
        }
      ],
      addForm:{
        car_type:'BLUE',
        car_number:'',
        driver:'',
        driver_phone:'',
        parking_lot_id:'',
        partition_id:'',
        parking_place_id:'',
        effective_time_begin:'',
        effective_time_end :''
      },
      carnumber:{
        firstnumber:'',
        secondnumber:'',
        thirdnumber:'',
        fourthnumber:'',
        fifthnumber:'',
        sixthnumber:'',
        seventhnumber:'',
        eighthnumber:''
      },
      total: 10,
      tableData: [],
      tableBlack: [],
      titles:'添加车辆',
      options: [],
      optionArea:[],
      optionParking:[],
      admin_id:'',
    }
  },
  mounted () {
    this.admin_id = this.$store.state.adminId
    this.getCarList()
    this.getparkingLotListByLoginId()
    this.getblacklist()
  },
  methods: {
    //登录者管理的停车场列表
    getparkingLotListByLoginId(){
      this.$api.parkingLotListByLoginId({admin_id:this.admin_id}).then(res=>{
        this.options = res
      })
    },
    // 车牌号种类切换
    platemodel(){
      if(this.addForm.car_type==='GREEN')
        this.isGreen= true
      else{
        this.isGreen= false
        this.carnumber.eighthnumber = ''
      }
    },
    // 车牌号
    moveNext(val,index){
      if(val.length===1){
        if(this.isGreen){
          if(index!=12)
            document.forms[0].elements[index].focus()
        }else{
          if(index!=11)
            document.forms[0].elements[index].focus()
        }  
      } 
      else if(val.length===0){
        if(index!=5)
          document.forms[0].elements[index-2].focus()
      }
    },

    // 添加车辆
    insertCar(){
      this.titles = '添加车辆'
      this.dialogVisibleInsertCar = true
    },
    // 编辑
    editInfo(val){
      console.log(val)
      this.titles = '编辑车辆'
      this.addForm.car_id= val.car_id
      this.addForm.car_type = val.car_type
      this.platemodel()
      this.addForm.driver = val.driver
      this.addForm.driver_phone = val.driver_phone
      this.addForm.parking_lot_id = val.parking_lot_id
      this.getPartitionList()
      this.addForm.partition_id = val.partition_id
      this.getPlaceList()
      this.addForm.parking_place_id = val.parking_place_id
      this.dateRangeTimes.push(new Date(parseInt(val.effective_time_begin*1000)))
      this.dateRangeTimes.push(new Date(parseInt(val.effective_time_end*1000)))
      this.addForm.car_number = val.car_number
      const carnum=this.addForm.car_number.split("")
      this.carnumber.firstnumber = carnum[0]
      this.carnumber.secondnumber = carnum[1]
      this.carnumber.thirdnumber = carnum[2]
      this.carnumber.fourthnumber = carnum[3]
      this.carnumber.fifthnumber = carnum[4]
      this.carnumber.sixthnumber = carnum[5]
      this.carnumber.seventhnumber = carnum[6]
      this.carnumber.eighthnumber = carnum[7]||''
      this.dialogVisibleInsertCar = true
    },
    // 删除
    delInfo(val){
      this.$confirm('此操作将删除此车辆记录,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteCar({admin_id:this.admin_id,car_id:val}).then(res=>{
          this.$message({
            type:'success',
            message:'删除成功'
          })
          this.getCarList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败'
        });
      });  
    },
    //黑名单
    onblack(){
      this.dialogVisibleBlack = true
    },
    // 加入黑名单
    blackress(){
      let car_number = this.carnumber.firstnumber+this.carnumber.secondnumber+this.carnumber.thirdnumber+this.carnumber.fourthnumber+this.carnumber.fifthnumber+this.carnumber.sixthnumber+this.carnumber.seventhnumber+this.carnumber.eighthnumber
      this.addForm.car_number = car_number
      this.addForm.admin_id = this.admin_id
      this.addForm.effective_time_begin = (new Date(this.dateRangeTimes[0])).getTime() / 1000 || ''
      this.addForm.effective_time_end = (new Date(this.dateRangeTimes[1])).getTime() / 1000 || '' 
      this.addForm.in_blacklist = 'YES' 
      this.$confirm('是否将该车辆加入黑名单,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.editCar(this.addForm).then(res=>{
          this.$message({
            type:'success',
            message:'该车辆已被加入黑名单'
          })
          this.handleClose()
          this.getUserList()
          this.getblacklist()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入黑名单'
        });
      });  
    },
    // 解除黑名单
    relieveInfo(val){
       this.$confirm('是否将该车辆解除黑名单,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.cancelBlacklist({admin_id:this.admin_id,car_id:val}).then(res=>{
          this.$message({
            type:'success',
            message:'该车辆已被解除黑名单'
          })
          this.getUserList()
          this.getblacklist()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入黑名单'
        });
      });  
    },
    // 编辑车辆确定
    editress(){
       let car_number = this.carnumber.firstnumber+this.carnumber.secondnumber+this.carnumber.thirdnumber+this.carnumber.fourthnumber+this.carnumber.fifthnumber+this.carnumber.sixthnumber+this.carnumber.seventhnumber+this.carnumber.eighthnumber
        this.addForm.car_number = car_number
        this.addForm.admin_id = this.admin_id
        this.addForm.effective_time_begin = (new Date(this.dateRangeTimes[0])).getTime() / 1000 || ''
        this.addForm.effective_time_end = (new Date(this.dateRangeTimes[1])).getTime() / 1000 || ''
        this.$api.editCar(this.addForm).then(res=>{
          this.$message({
            type:'success',
            message:'编辑成功'
          })
          this.handleClose()
          this.getCarList()
        })
    },
    // 添加车辆确定
    enterress(){
        let car_number = this.carnumber.firstnumber+this.carnumber.secondnumber+this.carnumber.thirdnumber+this.carnumber.fourthnumber+this.carnumber.fifthnumber+this.carnumber.sixthnumber+this.carnumber.seventhnumber+this.carnumber.eighthnumber
        this.addForm.car_number = car_number
        this.addForm.admin_id = this.admin_id
        this.addForm.effective_time_begin = (new Date(this.dateRangeTimes[0])).getTime() / 1000 || ''
        this.addForm.effective_time_end = (new Date(this.dateRangeTimes[1])).getTime() / 1000 || ''
        if (!this.addForm.car_number) {
          this.$message.error('请输入车牌号')
          return false
        }
         if (!this.addForm.driver) {
          this.$message.error('请输入车主姓名')
          return false
        }
        if (!this.addForm.driver_phone) {
          this.$message.error('请输入联系方式')
          return false
        }
         if (!this.addForm.parking_lot_id) {
          this.$message.error('请选择停车场')
          return false
        }
         if (!this.addForm.partition_id) {
          this.$message.error('请选择绑定区域')
          return false
        }
         if (!this.addForm.parking_place_id) {
          this.$message.error('请选择绑定车位')
          return false
        }
        this.$api.addCar(this.addForm).then(res=>{
          this.$message({
            type:'success',
            message:'添加成功',
          })
          this.handleClose()
          this.getUserList()
        })
    },
    handleChange (val) {
      this.getUserList()
    },
    // 关闭弹框
    handleClose () {
      this.dialogVisibleInsertCar = false
      this.addForm.car_type = 'BLUE'
      this.addForm.driver = ''
      this.addForm.driver_phone = ''
      this.addForm.parking_lot_id = ''
      this.addForm.car_number = ''
      this.addForm.partition_id = ''
      this.addForm.parking_place_id = ''
      this.addForm.effective_time_begin = ''
      this.addForm.effective_time_end = ''
      this.optionArea = []
      this.optionParking = []
      this.dateRangeTimes = []
      this.carnumber.firstnumber = ''
      this.carnumber.secondnumber = ''
      this.carnumber.thirdnumber = ''
      this.carnumber.fourthnumber = ''
      this.carnumber.fifthnumber = ''
      this.carnumber.sixthnumber = ''
      this.carnumber.seventhnumber = ''
      this.carnumber.eighthnumber = ''
      this.platemodel()
    },
    //关闭黑名单的弹框
    handleCloses(){
      this.dialogVisibleBlack = false
    },
    getUserList () {
      this.searchObj.page = 1
      this.getCarList()
    },
    // 获取车辆列表
    getCarList () {
      this.searchObj.admin_id = this.admin_id
      console.log(this.dateRangeTime)
      if(this.dateRangeTime === null||this.dateRangeTime === []){
         this.searchObj.effective_time_begin = ''
         this.searchObj.effective_time_end = ''
      }else{
        this.searchObj.effective_time_begin = (new Date(this.dateRangeTime[0])).getTime() / 1000 ||''
        this.searchObj.effective_time_end = (new Date(this.dateRangeTime[1])).getTime() / 1000 || ''
      }
      console.log(this.searchObj.effective_time_begin) 
      this.$api.carList(this.searchObj).then(res => {
        // console.log(res)
        this.tableData = res.list
        this.total = res.total_count
      })
    },
    // 选择停车场
    parkingchange(val){
      this.optionArea = []
      this.optionParking = []
      this.addForm.partition_id = ''
      this.addForm.parking_place_id = ''
      this.getPartitionList()
    },
    // 区域列表
    getPartitionList(){
      this.$api.partitionList({admin_id:this.admin_id,parking_lot_id:this.addForm.parking_lot_id}).then(res=>{
        this.optionArea = res
      })
    },
    // 选择停车场的哪个区
    carchange(){
      this.optionParking = []
      this.addForm.parking_place_id = ''
      this.getPlaceList()
    },
    // 车位列表
    getPlaceList(){
      let that = this
      this.$api.placeList({admin_id:this.admin_id,partition_id:this.addForm.partition_id}).then(res=>{
        if(res.length>0){
          res.forEach(function (data) {
            if(data.status==="FREE"){
              that.optionParking.push(data)
            }
          })
        }
      })
    },
    getblacklist(){
      this.$api.blacklist({admin_id:this.admin_id}).then(res => {
        this.tableBlack = res
      })
    },
    sizeChange (val) {
      this.searchObj.page = val
      this.getCarList()
    },
    dateFormat (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
      date = new Date(date * 1000)
      const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
  }
}
</script>

<style scoped>
  .hta-input {
    width: 260px;
    margin-right: 23px;
  }
  .hm-date{
    margin: 0 15px;
    /*width: 136px;*/
  }
/*  弹框*/
  .font-col{
    color: #101010;
  }
  .bdcolor{
    padding: 8px 15px;
    border-radius: 47%;
    color:#ffff;
    background-color: rgb(74, 235, 181);
  }
  .bdnocolor{
    padding: 8px 15px;
    border-radius: 47%;
    color:#ffff;
    background-color: rgb(209, 207, 207);
  }
  .mright{
    margin-right:5px;
  }
</style>
